// 抽屉组件的样式
// 抽屉的宽度
.ant-drawer-content-wrapper {
  width: 300px !important;
  // 控制 抽屉的背景
  .ant-drawer-content {
    background-color: #fff;
    // 设置 抽屉的伪元素，然后设置背景图片，模糊处理
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      filter: blur(4px);
      background: url(https://blog.kaygb.com/usr/uploads/kaygbcom/icon/f1.jpg) no-repeat;
      background-position: center;
      background-size: 178%;
    }
    // 设置 抽屉内容为透明
    .ant-drawer-wrapper-body {
      // ul
      .ant-menu {
        background: none;
        // 选中样式
        .ant-menu-item-selected {
          color: rgb(42, 111, 167);
          background-color: #e6f7ffc4;
        }
      }
    }
  }
}

// 头像
.up-img {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}

// 当屏幕宽度小于 576 px 时，抽屉的宽度为 全屏
@media screen and (max-width: 576px) {
  .ant-drawer-content-wrapper {
    width: 90vw !important;
   .ant-drawer-content {
     .ant-drawer-body {
       padding: 2rem;
      // ul
      .ant-menu {
          font-size: 1.1rem;
          // 选中样式
        .ant-menu-item-selected {
          border-radius: 2px;
        }
      }
     }
   }
  }
}
